<template>
  <div>
    <p>Header的count:{{ count1 }}</p>
    <button @click="add">加</button>
    <button @click="sub">减</button>
    <input type="text" v-model.number="thing" />
    <button @click="addFixed({ a: thing })">加固定的值</button>
    <button @click="delayed({ a: 2 })">待会再加</button>
    <p>电影的数量{{ movieList.length }}</p>
    <button @click="getMovieDataAxios">获取电影数据</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      thing: null,
    };
  },
  // 计算属性
  computed: {
    // 可以通过mapState的对象方式获取会成为一个战斗属性
    ...mapState({ count1: "count", movieList: "movieList" }),
  },

  methods: {
    ...mapMutations(["add", "sub", "addFixed"]),
    ...mapActions(["delayed", "getMovieDataAxios"]),
  },
};
</script>

<style>
</style>